<template>
  <div class="img-window-style">
    <div class="title">图片分组</div>
    <el-form :model="datas" label-width="120px" label-position="left">
      <!-- <el-form-item label="布局方式:" prop="style">
        <el-radio-group v-model="datas.style">
          <el-radio :label="2">1行2个</el-radio>
          <el-radio :label="3">1行3个</el-radio>
          <el-radio :label="4">1行4个</el-radio>
        </el-radio-group>
      </el-form-item> -->

      <el-form-item label="布局方式:" prop="arrangement">
        <div class="arrangement-box">
          <div class="one" :class="{ active: datas.arrangement === 1 }" @click="chengMethod(1, 2)">
            <div></div>
            <div></div>
          </div>
          <div class="two" :class="{ active: datas.arrangement === 2 }" @click="chengMethod(2, 3)">
            <div style="background-color: #feefc5"></div>
            <div class="right">
              <div></div>
              <div style="margin-top: 4%"></div>
            </div>
          </div>
          <div class="three" :class="{ active: datas.arrangement === 3 }" @click="chengMethod(3, 3)">
            <div></div>
            <div></div>
            <div></div>
          </div>
          <div class="four" :class="{ active: datas.arrangement === 4 }" @click="chengMethod(4, 4)">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
        </div>
        <el-radio-group v-model="datas.arrangement">
          <el-radio :label="1">第一种</el-radio>
          <el-radio :label="2">第二种</el-radio>
          <el-radio :label="3">第三种</el-radio>
          <el-radio :label="4">第四种</el-radio>
        </el-radio-group>
        <div>
          <el-text type="info">
            {{
              `建议添加宽高比例` +
              (datas.arrangement === 1
                ? " 1 : 1"
                : datas.arrangement === 2
                ? "左侧图 1 : 1 ，右侧 2 : 1"
                : datas.arrangement === 3
                ? " 1 ：1"
                : " 2 : 1")
            }}
          </el-text>
        </div>
      </el-form-item>

      <!-- <el-form-item label="布局方式:" prop="margin">
        <el-slider v-model="datas.margin" :max="30" />
      </el-form-item> -->
      <div class="imgs" v-for="(lun, imx) in datas.list" :key="imx">
        <div class="close">
          <el-icon @click="onDelImg(imx)"><Close /></el-icon>
        </div>
        <div class="ml20 mr20">
          <el-form-item label="图片:">
            <UploadImg v-model:image-url="lun.image">
              <template #empty>
                <el-icon><Picture /></el-icon>
                <span>请上传图片</span>
              </template>
            </UploadImg>
          </el-form-item>

          <el-form-item label="链接类型:">
            <el-select v-model="lun.linkName" @change="changeLinkType(lun.linkName, imx)">
              <el-option v-for="item in linkNameList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>

          <el-form-item label="链接指向:">
            <el-input v-model="lun.linkValue" disabled></el-input>
            <!-- <el-input v-if="lun.linkType === 1" v-model="lun.linkValue" /> -->
            <!-- <el-input v-else v-model="lun.linkName" disabled>
              <template #append>
                <el-button :icon="Plus" @click="openSelectTreeTable('选择商品', imx)"></el-button>
              </template>
            </el-input> -->
          </el-form-item>

          <!-- <el-form-item label="链接类型:">
            <el-select v-model="lun.linkType" @change="handleChangeSel(imx)">
              <el-option v-for="item in rotationType" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item> -->
          <!-- <el-form-item label="链接指向:">
            <el-input v-if="lun.linkType === 1" v-model="lun.linkValue" />
            <el-input v-else v-model="lun.linkName" disabled>
              <template #append>
                <el-button :icon="Plus" @click="openSelectTreeTable('选择商品', imx)"></el-button>
              </template>
            </el-input>
          </el-form-item> -->
        </div>
      </div>
      <el-button class="w100" type="primary" plain @click="addImg">点击添加图片</el-button>
    </el-form>
    <SelectTreeTable @radio="onRadio" ref="selectTreeTableRef" />
  </div>
</template>
<script lang="ts" setup name="ImgWindowStyle">
import { ref, toRefs, watch } from "vue";
import { Plus } from "@element-plus/icons-vue";
import UploadImg from "@/components/Upload/Img.vue";
// import { rotationType } from "@/utils/serviceDict";
import SelectTreeTable from "@/components/SelectTreeData/index.vue";
import { getWaresList, getWaresCategoryList } from "@/api/modules/inventory";
interface Props {
  datas: any;
}
const props = defineProps<Props>();
const { datas } = toRefs(props);
const addImg = () => {
  datas.value.list.push({
    linkType: 1,
    linkValue: "",
    linkName: "",
    image: ""
  });
};
// const handleChangeSel = (ix: number) => {
//   datas.value.list[ix].linkValue = "";
//   datas.value.list[ix].linkName = "";
// };
const onRadio = (row: any) => {
  datas.value.list[row.index].linkValue = row.data.id;
  datas.value.list[row.index].linkName = row.data.name;
};
const onDelImg = (ix: number) => {
  datas.value.list.splice(ix, 1);
};
const selectTreeTableRef = ref<InstanceType<typeof SelectTreeTable> | null>(null);
const openSelectTreeTable = (title: string, ix: number) => {
  const params = {
    title,
    isView: false,
    index: ix,
    selType: "radio",
    columns: [
      { type: "radio", label: "#", width: 60 },
      { prop: "name", label: "商品名称", align: "left" }
    ],
    idName: "goodsCategoryId",
    treeApi: getWaresCategoryList,
    api: getWaresList
  };
  selectTreeTableRef.value?.acceptParams(params);
};

const listNum = ref(0);
const chengMethod = (parameter: any, num: number) => {
  datas.value.arrangement = parameter;
  if (datas.value.list.length < num) {
    listNum.value = num - datas.value.list.length;
    for (let index = 0; index < listNum.value; index++) {
      addImg();
    }
    return;
  }
  if (datas.value.list.length > num) {
    datas.value.list = datas.value.list.filter((v: any, index: number) => index <= num - 1);

    return;
  }
};

// 链接指向数组
const linkValue = [
  "/pages/tab_bar/classify/classify",
  "/pages/user/address/address?address=image",
  "/pages/user/recharge/recharge"
];
const linkNameList = [
  { label: "堂食", value: 1 },
  { label: "外带", value: 2 },
  { label: "外卖", value: 3 },
  { label: "会员", value: 4 },
  { label: "无", value: "" }
];

// 选中方式
const changeLinkType = (type: number, index: number) => {
  if (type === 1 || type === 2) {
    datas.value.list[index].linkValue = linkValue[0];
  } else if (type === 3) {
    datas.value.list[index].linkValue = linkValue[1];
  } else if (type === 4) {
    datas.value.list[index].linkValue = linkValue[2];
  } else {
    datas.value.list[index].linkValue = "";
  }
};
</script>
<style lang="scss" scoped>
.title {
  padding: 5px;
  margin-bottom: 15px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
  border-left: 4px solid var(--el-color-primary);
}
.imgs {
  margin-bottom: 15px;
  border: 1px dashed #eeeeee;
  .close {
    display: flex;
    flex-direction: row-reverse;
    padding: 5px;
    margin-bottom: 20px;
    cursor: pointer;
    background-color: #f2f2f2;
  }
}
.arrangement-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  height: 150px;
  & > div {
    box-sizing: border-box;
    display: flex;
    width: 47%;
    height: 70px;
    padding: 10px 5px;
    margin-bottom: 5px;
    border: 1px solid #feefc5;
    border-radius: 3px;
  }
  .one {
    justify-content: space-between;
    & > div {
      width: 48%;
      height: 50px;
      background-color: #feefc5;
    }
  }
  .two {
    justify-content: space-between;
    & > div {
      width: 48%;
      height: 50px;
    }
    .right > div {
      height: 46%;
      background-color: #feefc5;
    }
  }
  .three {
    justify-content: space-between;
    & > div {
      width: 30%;
      background-color: #feefc5;
    }
  }
  .four {
    flex-wrap: wrap;
    justify-content: space-between;
    & > div {
      width: 48%;
      height: 46%;
      background-color: #feefc5;
    }
  }
  .active {
    border: 1px solid #fdc31d;
    & > div {
      background-color: #fdc31d !important;
    }
    .right {
      background-color: transparent !important;
      & > div {
        background-color: #fdc31d !important;
      }
    }
  }
}
</style>
